<div id="toolbar" class="toolbar">
    <div class="toggleSeriesPanel">
        <div id="toggleSeriesPanelButton" tabindex="1" class="toolbarSectionButton roundedButton toggleSeriesPanelButton {{#if seriesPanelOpen}}active{{/if}} {{classes}}" title="{{ToggleSeriesPanelText}}">
            <div class="svgContainer">
                <div class="svgContent series-panel"></div>
            </div>
            <div class="buttonLabel">
                <span>{{SeriesText}}</span>
            </div>
        </div>
    </div>

    <div class="toolbarSectionTools">
        {{#each (toolbarButtons)}}
        <div id="{{id}}" tabindex="1" class="toolbarSectionButton {{#if toolActive}}active{{/if}} {{classes}}" title="{{title}}">
            <div class="svgContainer">
                {{#if svgClasses}}
                <div class="{{svgClasses}}"></div>
                {{else}}
                <i class="{{iconClasses}}"></i>
                {{/if}}
            </div>
            <div class="buttonLabel">
                <span>{{title}}</span>
            </div>
        </div>
        {{/each}}

        <div class="moreTools js-more-tools">
            <div class="toolbarSectionButton notTool">
                <div class="svgContainer">
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="buttonLabel">
                    <span>{{MoreText}}</span>
                </div>
            </div>
        </div>
    </div>

    <a class="button-close js-close-viewer" title="{{CloseViewerText}}"><i class="fa fa-times fa-lg"></i></a>
</div>